<ng-container *ngIf="(this.toolbarData$ | async) as toolbarData">
  <div fxLayout="row"
    fxLayoutAlign="center center"
    *ngIf="(this.themeState$ | async) as state"
    [class.dark-to-light-primary]="state.prevThemeType === 'dark' && state.currThemeType === 'light' && !state.currIsActionMode"

    [class.light-to-dark-primary]="state.prevThemeType === 'light' && state.currThemeType === 'dark' && !state.currIsActionMode"

    [class.dark-to-light-accent]="state.prevThemeType === 'dark' && state.currThemeType === 'light' && state.currIsActionMode"

    [class.light-to-dark-accent]="state.prevThemeType === 'light' && state.currThemeType === 'dark' && state.currIsActionMode"

    [class.action-mode-on-to-off-dark]="state.hasActionModeBeenEnabled && !state.currIsActionMode && state.currThemeType === 'dark'"

    [class.action-mode-off-to-on-dark]="state.currIsActionMode && state.currThemeType === 'dark'"
    [class.action-mode-on-to-off-light]="state.hasActionModeBeenEnabled && !state.currIsActionMode && state.currThemeType === 'light'"

    [class.action-mode-off-to-on-light]="state.currIsActionMode && state.currThemeType === 'light'"
    class="toolbar mat-elevation-z2">

    <ng-container *ngIf="{
      showActionMode: toolbarData.shouldShowActionMode(),
      numSubPaths: toolbarData.getNumSubPaths(),
      numSegments: toolbarData.getNumSegments(),
      numPoints: toolbarData.getNumPoints(),
      toolbarTitle: toolbarData.getToolbarTitle(),
      toolbarSubtitle: toolbarData.getToolbarSubtitle(),
      showAddPoints: toolbarData.getNumSubPaths() > 0 || toolbarData.getNumSegments() > 0 || !toolbarData.isSelectionMode(),
      showSplitSubPaths: toolbarData.getNumSubPaths() > 0 || toolbarData.getNumSegments() > 0 || !toolbarData.isSelectionMode(),
      showPairSubPaths: toolbarData.shouldShowPairSubPaths(),
      showReverseSubPaths: toolbarData.getNumSubPaths() === 1,
      showShiftSubPath: toolbarData.shouldShowShiftSubPath(),
      showSetFirstPosition: toolbarData.shouldShowSetFirstPosition(),
      showDeleteSubPaths: toolbarData.getNumSplitSubPaths() > 0,
      showDeleteSegments: toolbarData.getNumSegments() > 0,
      showDeletePoints: toolbarData.getNumSplitPoints() > 0,
      showSplitInHalf: toolbarData.shouldShowSplitInHalf(),
      showAutoFix: toolbarData.shouldShowAutoFix()
    } as data">

      <!-- Shape Shifter logo. -->
      <mat-icon *ngIf="!data.showActionMode"
        class="toolbar-logo"
        svgIcon="shapeshifter">
      </mat-icon>

      <!-- Action mode close button. -->
      <button mat-icon-button
        *ngIf="data.showActionMode"
        class="action-mode-close-icon"
        (click)="onCloseActionModeClick($event)">
        <mat-icon>{{ toolbarData.isSelectionMode() ? 'arrow_back' : 'close' }}</mat-icon>
      </button>

      <!-- Toolbar text. -->
      <div fxLayout="column">
        <span class="toolbar-title">{{ data.toolbarTitle }}</span>
        <span *ngIf="data.toolbarSubtitle"
          class="toolbar-subtitle">
          {{ data.toolbarSubtitle }}
        </span>
      </div>

      <span fxFlex="1 1 auto"></span>

      <button mat-icon-button
        class="toolbar-action-button"
        (click)="onAutoFixClick($event)"
        matTooltip="Auto fix"
        matTooltipShowDelay="500"
        *ngIf="data.showAutoFix"
        matTooltipPosition="below">
        <mat-icon svgIcon="autofix"></mat-icon>
      </button>

      <!-- SubPath mode. -->
      <button mat-icon-button
        class="toolbar-action-button"
        matTooltip="Add points (A)"
        matTooltipPosition="below"
        *ngIf="data.showAddPoints"
        matTooltipShowDelay="500"
        (click)="onAddPointsClick($event)"
        [class.activated]="toolbarData.isAddPointsMode()">
        <mat-icon>add_circle_outline</mat-icon>
      </button>
      <button mat-icon-button
        class="toolbar-action-button"
        matTooltip="Split subpaths (S)"
        matTooltipPosition="below"
        *ngIf="data.showSplitSubPaths"
        matTooltipShowDelay="500"
        (click)="onSplitSubPathsClick($event)"
        [class.activated]="toolbarData.isSplitSubPathsMode()">
        <mat-icon>content_cut</mat-icon>
      </button>
      <button mat-icon-button
        class="toolbar-action-button"
        matTooltip="Pair subpaths (D)"
        matTooltipPosition="below"
        *ngIf="data.showPairSubPaths"
        matTooltipShowDelay="500"
        (click)="onPairSubPathsClick($event)"
        [class.activated]="toolbarData.isPairSubPathsMode()">
        <mat-icon>compare_arrows</mat-icon>
      </button>
      <button mat-icon-button
        class="toolbar-action-button"
        matTooltip="Reverse points (R)"
        matTooltipPosition="below"
        *ngIf="data.showReverseSubPaths"
        matTooltipShowDelay="500"
        (click)="onReversePointsClick($event)"
        [disabled]="!toolbarData.isSelectionMode()">
        <mat-icon svgIcon="reverse"></mat-icon>
      </button>
      <button mat-icon-button
        class="toolbar-action-button"
        matTooltip="Shift back points (B)"
        matTooltipPosition="below"
        *ngIf="data.showShiftSubPath"
        matTooltipShowDelay="500"
        (click)="onShiftBackPointsClick($event)"
        [disabled]="!toolbarData.isSelectionMode()">
        <mat-icon>skip_previous</mat-icon>
      </button>
      <button mat-icon-button
        class="toolbar-action-button"
        matTooltip="Shift forward points (F)"
        matTooltipPosition="below"
        *ngIf="data.showShiftSubPath"
        matTooltipShowDelay="500"
        (click)="onShiftForwardPointsClick($event)"
        [disabled]="!toolbarData.isSelectionMode()">
        <mat-icon>skip_next</mat-icon>
      </button>
      <button mat-icon-button
        class="toolbar-action-button"
        matTooltipPosition="below"
        matTooltip="Delete subpath{{data.numSubPaths === 1 ? '' : 's'}}"
        matTooltipShowDelay="500"
        *ngIf="data.showDeleteSubPaths"
        (click)="onDeleteSubPathsClick($event)">
        <mat-icon>delete</mat-icon>
      </button>

      <!-- Segment mode. -->
      <button mat-icon-button
        class="toolbar-action-button"
        matTooltipPosition="below"
        matTooltip="Delete segment{{data.numSegments === 1 ? '' : 's'}}"
        matTooltipShowDelay="500"
        *ngIf="data.showDeleteSegments"
        (click)="onDeleteSegmentsClick($event)">
        <mat-icon>delete</mat-icon>
      </button>

      <!-- Point mode. -->
      <button mat-icon-button
        matTooltip="Add point (A)"
        matTooltipPosition="below"
        matTooltipShowDelay="500"
        *ngIf="data.showSplitInHalf"
        (mouseenter)="onSplitInHalfHoverEvent(true)"
        (mouseleave)="onSplitInHalfHoverEvent(false)"
        (click)="onSplitInHalfClick($event)">
        <mat-icon>add_circle_outline</mat-icon>
      </button>
      <button mat-icon-button
        class="toolbar-action-button"
        matTooltip="Set first point (F)"
        matTooltipPosition="below"
        matTooltipShowDelay="500"
        *ngIf="data.showSetFirstPosition"
        (click)="onSetFirstPositionClick($event)">
        <mat-icon>looks_one</mat-icon>
      </button>
      <button mat-icon-button
        class="toolbar-action-button"
        matTooltipPosition="below"
        matTooltip="Delete point{{data.numPoints === 1 ? '' : 's'}}"
        matTooltipShowDelay="500"
        *ngIf="data.showDeletePoints"
        (click)="onDeletePointsClick($event)">
        <mat-icon>delete</mat-icon>
      </button>

      <!-- Overflow menu buttons. -->
      <button class="toolbar-action-button"
        mat-icon-button
        (click)="$event.stopPropagation()"
        [matMenuTriggerFor]="overflowMenu">
        <mat-icon>more_vert</mat-icon>
      </button>
      <mat-menu #overflowMenu="matMenu">
        <div mat-menu-item
          (click)="this.darkTheme = !this.darkTheme">
          <mat-slide-toggle (click)="this.darkTheme = !this.darkTheme; $event.stopPropagation()"
            [(ngModel)]="darkTheme"></mat-slide-toggle>
          <span>Dark theme</span>
        </div>
        <a href="http://www.androiddesignpatterns.com/2016/11/introduction-to-icon-animation-techniques.html"
          target="_blank"
          class="toolbar-overflow-link-item">
          <button mat-menu-item
            (click)="this.onGettingStartedClick()">
            <mat-icon>info</mat-icon>
            <span>Getting started</span>
          </button>
        </a>
        <a href="https://github.com/alexjlockwood/ShapeShifter"
          target="_blank"
          class="toolbar-overflow-link-item">
          <button mat-menu-item
            (click)="this.onContributeClick()">
            <mat-icon style="line-height: 1"
              svgIcon="contribute"></mat-icon>
            <span>Contribute</span>
          </button>
        </a>
        <a href="https://github.com/alexjlockwood/ShapeShifter/issues"
          target="_blank"
          class="toolbar-overflow-link-item">
          <button mat-menu-item
            (click)="this.onSendFeedbackClick()">
            <mat-icon>bug_report</mat-icon>
            <span>Send feedback</span>
          </button>
        </a>
        <a href="{{ this.isBeta() ? 'https://shapeshifter.design' : 'https://beta.shapeshifter.design' }}"
          target="_blank"
          class="toolbar-overflow-link-item">
          <button mat-menu-item>
            <mat-icon>open_in_new</mat-icon>
            <span>Switch to {{ this.isBeta() ? 'stable' : 'beta' }} </span>
          </button>
        </a>
      </mat-menu>
    </ng-container>
  </div>
</ng-container>